{% extends '../temp_base.html' %}

{% block local_header_css_js %}
  <!-- DataTables -->
  <link rel="stylesheet" href="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.css">

{% end %}

{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        System List
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Resource Management</a></li>
        <li class="active">System List</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box-info">
            <div class="box-header">
              <button id="btn_create_system" type="button" class="btn btn-primary btn-xs" value="addsystem">Add System</button>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="tb_system_list" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>NO</th>
                  <th>System Name</th>
                  <th>Description</th>
                  <th>System Type</th>
                  <th>Creator</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for index, system in enumerate(system_list, start=1) %}
                <tr>
                  <td>{{index}}</td><td>{{system.name}}</td><td>{% if system.description %} {{system.description}} {%else%} &nbsp; {%end%}</td>
                  <td>{% if system.systype==1 %} PRD {%else%} TST {%end%}</td>
                  <td>{% if system.creator %} {{system.creator.name}} {%else%} &nbsp; {%end%} </td>
                  <td>
                    <button id="btn_system_hosts" type="button" class="btn btn-primary btn-xs" value="syshosts?id={{system.id}}">Hosts</button>
                    <button id="btn_update_system" type="button" class="btn btn-primary btn-xs" value="updatesystem?id={{system.id}}">Update</button>
                    <button id="btn_delete_system" type="button" class="btn btn-primary btn-xs" value="deletesystem?id={{system.id}}">Delete</button>
                  </td>
                </tr>
                {% end %}
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{% end %}

{% block local_footer_css_js %}
<!-- DataTables -->
<script src="{{HTML_URL_BASE}}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="{{HTML_URL_BASE}}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{HTML_URL_BASE}}/plugins/fastclick/fastclick.js"></script>
<!-- page script -->
<script>
  $(function () {
    $("button[id^='btn_']").click(function(){
        //alert("hello "+this.value);
        window.location.href=this.value;
    });

    $("#tb_system_list").DataTable();
    
    //$("#btn_create_system").click(function(){
    //    window.location.href='addsystem';
    //});
    
  });
</script>
{% end %}
